<!--这是修改身份组件-->
<template>
  <div>
    <p class="filter"></p>
    <div class="addBox">
      <h3 class="fixTitle">
        <span>修改身份</span>
        <p>
          <em style="cursor: pointer;">
            <svg-icon icon-class="jian" class="font-size16" />
          </em>
          <em style="cursor: pointer;">
            <svg-icon class="font-size16" icon-class="fullScreen" />
          </em>
          <em style="cursor: pointer;" @click="close">
            <svg-icon icon-class="cha" class="font-size16" />
          </em>
        </p>
      </h3>
      <div style="margin: 50px 20px 0;">
        <table>
          <tr>
            <td class="leftTd">推荐人：</td>
            <td class="rightTd">
              <multiselect
                style="width:200px;float:left;"
                v-model="memberInfo"
                :options="teacherList"
                @search-change="syncSearchTeachers"
                placeholder="搜索用户"
                :loading="isLoading"
                selectLabel="选择"
                deselectLabel="删除"
                track-by="userId"
                label="name"
                :internalSearch="false"
              >
                <span slot="noResult">无结果</span>
              </multiselect>
              <span
                @click="clearParent"
                title="点击清除推荐人，强制提交"
                style="color:red;margin-left:12px;font-size:20px;cursor:pointer"
              >×</span>
            </td>
          </tr>
          <tr>
            <td class="leftTd">请选择身份：</td>
            <td class="rightTd">
              <el-select style="width: 200px;" v-model="vipType" placeholder="请选择代理商">
                <el-option
                  v-for="(item, index) in selectOptions"
                  :key="item.id"
                  :label="item.value"
                  :value="item.id"
                ></el-option>
              </el-select>
            </td>
          </tr>
          <tr>
            <td class="leftTd">输入成交金额：</td>
            <td class="rightTd">
              <el-input-number style="width: 200px;" v-model="price"></el-input-number>
            </td>
          </tr>
        </table>
      </div>
      <p style="text-align: center;margin: 30px 0;">
        <el-button type="primary" icon="el-icon-check" @click="confirmPartner">确认</el-button>
        <el-button type="primary" @click="close">取消</el-button>
      </p>
    </div>
    <editCommand
      v-if="isShowCommand"
      @hideCommand="hideCommand"
      :userInfo="info"
      @commandSave="commandSave"
    ></editCommand>
  </div>
</template>
<script>
import { commandSave } from "@/api/member";
import { getUserByKey } from "@/api/social";
import Multiselect from "vue-multiselect"; // 引入 vue-multiselect 组件
import "vue-multiselect/dist/vue-multiselect.min.css";
let timeId;
export default {
  components: {
    Multiselect,
    editCommand: require("../../member/components/editCommand").default // 引入修改推荐人组件
  },
  data() {
    return {
      dealMoney: "",
      selectOptions: [
        // 身份下拉菜单选择项
        {
          id: 3,
          value: "合伙人"
        },
        {
          id: 5,
          value: "事业部"
        }
        // , {
        //   id: 6,
        //   value: '分公司'
        // }
      ],
      isShowCommand: false,
      info: [],
      vipType: null,
      reNickname: null,
      changeData: [],
      memberInfo: { userId: null, name: null, pVipType: null },
      teacherList: [],
      isLoading: false,
      price: ""
    };
  },
  props: ["userInfo"],
  created() {
    this.vipType = this.userInfo.vipType;
    this.reNickname = this.userInfo.reNickname;
    this.changeData.pVipType = this.userInfo.pVipType;
    if (this.userInfo.showId) {
      this.memberInfo = {
        userId: this.userInfo.showId,
        name: this.userInfo.reNickname + `（ID: ${this.userInfo.showId}）`,
        pVipType: this.userInfo.pVipType
      };
    }
    // this.memberInfo = {userId: this.userInfo.showId, name: this.userInfo.reNickname}
  },
  methods: {
    clearParent() {
      this.memberInfo = null;
    },
    close() {
      this.changeData.reNickname = this.reNickname;
      this.$emit("hideEditPartner", this.changeData);
    },
    syncSearchTeachers(query) {
      // 搜索讲师，选择讲师
      clearTimeout(timeId);
      if (query !== "") {
        this.isLoading = true;
        console.log("start");
        timeId = setTimeout(() => {
          getUserByKey({ query: query })
            .then(res => {
              // console.log(res.data)
              this.isLoading = false;
              const resData = res.data.data;
              this.teacherList = [];
              for (let i = 0; i < resData.length; i++) {
                this.teacherList.push({
                  userId: resData[i].userId,
                  avatar: resData[i].avatar,
                  mobile: resData[i].mobile,
                  pVipType: resData[i].vipType,
                  status: 2,
                  name: resData[i].userName + `（ID: ${resData[i].userId}）`,
                  userName: resData[i].userName
                });
              }
            })
            .catch(err => {
              this.isLoading = false;
              console.log(err);
            });
        }, 200);
      } else {
        console.log("end");
        this.isLoading = false;
        this.teacherList = [];
      }
    },
    confirmPartner() {
      this.changeData.showId = this.memberInfo ? this.memberInfo.userId : null;
      this.changeData.vipType = this.vipType;
      this.changeData.reNickname = this.reNickname;
      this.changeData.price = this.price;
      this.changeData.pVipType = this.memberInfo
        ? this.memberInfo.pVipType
        : null;
      if (this.changeData.showId && this.vipType < this.userInfo.vipType) {
        this.$message({
          type: "warning",
          message: "身份不能往低的改!"
        });
        return;
      }

      if (
        this.changeData.showId &&
        this.changeData.pVipType &&
        this.changeData.pVipType < this.vipType
      ) {
        this.$message({
          type: "error",
          message: "推荐人的身份不能低于当前选择的身份，请修改推荐人!"
        });
        return;
      }
      this.$emit("confirmPartner", this.changeData);
    },
    editCommand(id, index) {
      this.isShowCommand = true;
      this.info.userId = this.userInfo.userId;
      this.info.vipType = this.userInfo.vipType;
      this.info.title = "修改推荐人";
    },
    hideCommand(msg) {
      this.isShowCommand = msg;
    },
    commandSave(radio) {
      var data = { userId: this.userInfo.userId, radio: radio };
      commandSave(data)
        .then(res => {
          this.$message({
            type: "success",
            message: "修改成功!"
          });
          if (!radio) {
            this.reNickname = null;
            this.changeData.pVipType = null;
          } else {
            this.reNickname = res.data.data.nickname;
            this.changeData.pVipType = res.data.data.vipType;
          }
          this.isShowCommand = false;
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>
<style scoped>
p,
h3 {
  margin: 0;
  padding: 0;
}

h3 em {
  padding: 0 10px;
  font-style: normal;
}

h3 em:hover {
  color: #0e90d2;
}

.font-size16 {
  font-size: 16px;
}

.fixTitle {
  width: 400px;
  padding: 0 10px;
}

.addBox {
  width: 400px;
  height: 300px;
  background: #fff;
  position: fixed;
  left: 35%;
  top: 30%;
  z-index: 101;
}

table {
  width: 100%;
  border: 1px solid #eee;
  border-spacing: 0;
  border-collapse: collapse;
  font-size: 12px;
  margin: 20px auto;
}

td {
  border: 1px solid #eee;
  line-height: 50px;
  padding-left: 10px;
}

.leftTd {
  width: 30%;
}

.rightTd {
  width: 70%;
}
</style>
